<template>
  <div class="mod-config" >
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item label="客户等级">
        <el-select v-model="dataForm.customerLevel" placeholder="客户等级">
          <el-option v-for="item in options1" :key="item.val" :label="item.label" :value="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员身份">
        <el-select v-model="dataForm.grade" placeholder="会员身份">
          <el-option v-for="item in options" :key="item.val" :label="item.label" :value="item.val"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.userId" placeholder="uid" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.phone" placeholder="手机号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button  @click="search()">查询</el-button>
        <el-button type="primary"  @click="download">下载</el-button>
        <el-button type="primary" @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
    <div class="tableTitle">会员客户列表</div>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;"
    >
      <el-table-column prop="userId" header-align="center" align="center" label="uid"></el-table-column>
      <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
      <el-table-column prop="avatar" header-align="center" align="center" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" style="width: 40px;height: 40px;">
        </template>
      </el-table-column>
      <el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
      <el-table-column prop="grade" header-align="center" align="center" label="会员身份">
        <template slot-scope="scope">
           <span v-if="scope.row.grade==1">会员</span>
           <span v-if="scope.row.grade==2">经理</span>
           <span v-if="scope.row.grade==3">总监</span>
         </template>
      </el-table-column>
      <el-table-column prop="wxNumber" header-align="center" align="center" label="微信号"></el-table-column>
       <el-table-column header-align="center" align="center" label="客户级别">
         <template slot-scope="scope">
           <span v-if="scope.row.customerLevel === 1">一级</span>
           <span v-if="scope.row.customerLevel === 2">二级</span>
         </template>
       </el-table-column>
      <el-table-column prop="gmtCreate" header-align="center" align="center" label="分销关系建立时间"></el-table-column>
      <el-table-column prop="gmtModified" header-align="center" align="center" label="分销关系解除时间">
         <template slot-scope="scope">
             <span v-if="scope.row.isAlive==1">--</span>
             <span v-else>{{scope.row.gmtModified}}</span>
         </template>
      </el-table-column>
      <el-table-column prop="isAlive" header-align="center" align="center" label="分销关系状态">
          <template slot-scope="scope">
              {{scope.row.isAlive==1?'正常':'解除'}}
         </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!-- <div style="display: flex;justify-content: center;margin: 20px;"></div> -->
  </div>
</template>

<script>
  export default {
    data () {
      return {
        options: [
          {
            val: null,
            label: '全部'
          },
          {
          val: '1',
          label: '普通会员'
          },
          {
            val: '2',
            label: '经理'
          },
          {
            val: '3',
            label: '总监'
          }],
        options1: [
          {
            val: null,
            label: '全部'
          },
          {
            val: 1,
            label: '一级'
          },
          {
            val: 2,
            label: '二级'
         }],
        dataForm: {
          page: this.pageIndex,
          limit: this.pageSize,
          key: '',
          grade: null,
          customerLevel: null
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListLoading1: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        isAlive: ''
      }
    },
    props: ['id'],
    watch: {
      userId () {
        return this.userIds
      }
    },
    mounted () {
      this.getDataList()
    },
    methods: {
      //搜索
      search(){
        this.pageIndex = 1;
        this.getDataList();
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        let obj = {
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
          relationUid: this.id
        }
        if (this.dataForm.grade) {
          obj.grade = this.dataForm.grade
        }
        if (this.dataForm.userId) {
          obj.userId = this.dataForm.userId
        }
        if (this.dataForm.nickname) {
          obj.nickname = this.dataForm.nickname
        }
        if (this.dataForm.phone) {
          obj.phone = this.dataForm.phone
        }
        if (this.dataForm.customerLevel) {
          obj.customerLevel = this.dataForm.customerLevel
        }
        this.$http({
          url: this.$http.adornUrl('/sale/saleRelation/memberRelationList'),
          method: 'get',
          params: this.$http.adornParams(obj)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      goBack () {
        this.$emit('goBack')
      },
      download() {
        let obj = {
          page: this.pageIndex,
          limit: this.pageSize,
          key: this.dataForm.key,
          relationUid: this.id
        }
        if (this.dataForm.grade) {
          obj.grade = this.dataForm.grade
        }
        if (this.dataForm.userId) {
          obj.userId = this.dataForm.userId
        }
        if (this.dataForm.nickname) {
          obj.nickname = this.dataForm.nickname
        }
        if (this.dataForm.phone) {
          obj.phone = this.dataForm.phone
        }
        if (this.dataForm.customerLevel) {
          obj.customerLevel = this.dataForm.customerLevel
        }
        this.$http({
          url: this.$http.adornUrl("/sale/saleRelation/memberRelationList/download"),
          method: "get",
          params: this.$http.adornParams(obj),
          headers: {
            "Content-Type": "application/json; application/octet-stream"
          },
          responseType: "arraybuffer"
        }).then(({ data }) => {
          const blob = new Blob([data], { type: "application/vnd.ms-excel" });
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = "会员客户信息.xls";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        });
      }
    }
  }
</script>
<style scoped>
  .tableTitle{
    padding: 20px;
    font-size: 15px;
  }
  .el-row{
    font-size: 16px;
    margin: 15px 0;
  }
  .centerel{
    text-align: center;
    padding: 10px 20px;
    background: #f2f2f2;
    margin: 25px 0;
  }
  .line{
    display: flex;
    justify-content: center;
  }
  .line div{
    height: 100%;
    width: 1px;
    background: #bbb;
  }
</style>
